<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../styles/global.css">
    <link rel="stylesheet" href="../../../../css/unis.css">
    <link rel="stylesheet" href="../../../parcel-project/parcel-project.css">
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>

<div class="container-fluid" id="app">

  <div class="unis-header">
    <div class="nav">
    </div>
    <div class="user accents-bg">js
        <div class="drop-box">
            <ul>
                <li>
                    <div class="head"></div>Jessica Chen</li>
                <li>
                    <button>My Profile</button>
                </li>
                <li>
                    <button>Technical Support</button>
                </li>
                <li>
                    <button>Settings</button>
                </li>
                <li>
                    <button>Log Out</button>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">
                    <div class="unis-steps current">
                        <span>1</span>
                    </div>Ship From</div>
            </div>
            <div class="content">
                <div class="dropdown">
                    <label>Office Address</label>
                    <button class="unis-select">
                        <input type="button" value="My Default Address">
                    </button>
                </div>
                <div class="dropdown">
                    <label>Return Address</label>
                    <button class="unis-select">
                        <input type="button" value="Same as Ship Address">
                    </button>
                </div>
            </div>
            <div class="bottom_address">UNIS, LLC, Jessica Lynn
                <br>6800 La Mirada
                <br>La Mirada, CA 00000</div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">
                    <div class="unis-steps current">
                        <span>2</span>
                    </div>Upload Batch File</div>
            </div>
            <div class="content">
                <div class="dropdown">
                    <div class="unis-downloader">
                        <a href="path_to_file" download="proposed_file_name">Download the batch file template (Recommended)</a>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="unis-uploading">
                        <input type="file">
                        <i class="unis-cloud unis-icon"></i>Drag and drop files here or
                        <span>Browse</span>
                    </div>
                </div>
            </div>
            <div class="bottom_box"></div>
        </div>
    </div>
</div>
<div class="unis-section" style="position:relative">
    <div class="position-re">
        <div class="modification">
            <div class="header">
                <div class="title">
                    <div class="unis-steps current">
                        <span>3</span>
                    </div>Payment</div>
            </div>
            <div class="content">
                <div class="dropdown">
                    <label>Choose Payment Method</label>
                    <button class="unis-select">
                        <input type="button" value="Prepay balance">
                    </button>
                </div>
                <div class="unis-checkbox">
                    <input type="checkbox" name="1" id="ch1">
                    <label class="unis-checkbox-style" for="ch1"></label>
                    <span>Apply Unis Credit $10.00 available</span>
                </div>
            </div>
            <div class="content">
                <div class="d-flex flex-row-reverse">
                    <div class="align-self-center p-2 bo-no">
                        <div class="charge">$0.00</div>
                    </div>
                    <div class="align-self-center p-2 bo-no">
                        <div class="charge-label">Total estimated charge</div>
                    </div>
                </div>
            </div>
            <div class="bottom_box">
                <button class="unis-btn unis-btn-primary">Accept Charges and Print</button>
            </div>
        </div>
    </div>
</div>


</div>
<script src="./js/beautify2.js" type="text/javascript"></script>
<script src="./js/beautify-css2.js" type="text/javascript"></script>
<script src="./js/beautify-html2.js" type="text/javascript"></script>
<script src="js/jquery.min.js"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",

    });
</script>
<script>
    $(document).ready(function () {
        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 0,
        scrollSpy: true
    });
</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
</body>
</html>
